<template>
	<!-- 页面全局配置 -->
	<view class="page-config">
		<!-- vuetop -->
		<view class="header">
			<view class="user-info">
				<image class="avatar"
					src="https://image.meiye.art/Fha6tqRTIwHtlLW3xuZBJj8ZXSX3?imageMogr2/thumbnail/450x/interlace/1">
				</image>
				<text class="text-xl">登录/注册</text>
			</view>
		</view>
		<view class="section">
			<view class="item">
				<text class="text-sub">修改密码</text>
				<view class="cuIcon-right text-gray" style="font-size: 36rpx;"></view>
			</view>
			<view class="item">
				<text class="text-sub">资质认证</text>
				<view class="cuIcon-right text-gray" style="font-size: 36rpx;"></view>
			</view>
			<view class="divider"></view>
			<view class="item">
				<text class="text-sub">发布招聘</text>
				<view class="cuIcon-right text-gray" style="font-size: 36rpx;"></view>
			</view>
			<view class="item">
				<text class="text-sub">招聘协议</text>
				<view class="cuIcon-right text-gray" style="font-size: 36rpx;"></view>
			</view>
			<view class="divider"></view>
			<view class="item">
				<text class="text-sub">保密协议</text>
				<view class="cuIcon-right text-gray" style="font-size: 36rpx;"></view>
			</view>
			<view class="item">
				<text class="text-sub">隐私协议</text>
				<view class="cuIcon-right text-gray" style="font-size: 36rpx;"></view>
			</view>
			<view class="item">
				<text class="text-sub">服务协议</text>
				<view class="cuIcon-right text-gray" style="font-size: 36rpx;"></view>
			</view>
		</view>
		<view class="modal" :class="mymodelshow31">
		</view>
		<view class="action-button">
			<button class="onebutton38 round cu-btn lg round bg-gradual-orange">退出登录</button>
		</view>
		<!-- vuebottom -->
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onHide,
		onPullDownRefresh,
		onReachBottom,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	let bgpic6 = ref("https://image.meiye.art/Fha6tqRTIwHtlLW3xuZBJj8ZXSX3?imageMogr2/thumbnail/450x/interlace/1");
	let editname = ref('show');
	onLoad(() => {
		//...
	});
	const hideModal31 = (e) => {
		editname.value = "";
	};
</script>

<style scoped>
	/** 本页全局配置的代码 **/
	.page-config {
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
		height: 100vh;
	}

	/** 头部样式 **/
	.header {
		background-position: right center;
		background-size: cover;
		align-items: center;
		height: 400rpx;
		display: flex;
		align-items: center;
		background: linear-gradient(to bottom, #87CEEB, #ADD8E6);
	}

	.user-info {
		margin-left: 20rpx;
		margin-bottom: 42rpx;
		align-items: center;
	}

	.text-xl {
		margin-left: 18rpx;
		color: #ffffff;
		font-size: 30rpx;
		/* 设置字体大小 */
		font-weight: bold;
		/* 加粗 */
	}

	/** 条目样式 **/
	.section {
		background-color: #ffffff;
	}

	.item {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  padding: 15rpx 20rpx;
		  background-color: #f9f9f9;
		  border-bottom: 1rpx solid #e5e5e5;
	}

	.text-sub {
		 font-size: 18rpx;
	}

	.divider {
		width: 30%;
	}

	/** 模态框样式 **/
	.modal {
		width: 100%;
	}

	.form {
		background-color: #ffffff;
		align-items: center;
	}

	.input {
		margin-top: 4rpx;
		margin-bottom: 24rpx;
		border: 2rpx solid #dcdee2;
		min-height: 86rpx;
	}

	.buttons {
		align-items: center;
	}

	.button {
		width: 34%;
	}

	/** 操作按钮样式 **/
	.action-button {
		align-items: flex-start;
	}

	.onebutton38 {
		width: 90%;
		font-size: 34rpx;
		background-color: #ff0000;
		color: #ffffff;
		margin-top: 46rpx;
		margin-bottom: 34rpx;
		 border-radius: 25px;
	}

	/* 调整头像样式 */
	.avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		border: 2rpx solid #fff;
		box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
		background-size: cover;
		background-position: center;
		transition: all 0.3s ease;
	}

	.avatar:hover {
		transform: scale(1.1);
		box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.3);
	}
</style>